<template>
	<view style="background-color: #000;">
		<!-- <view class="page"  :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="page" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">

			<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
				<view v-if="isWXflag==true" style="height: 100rpx;"></view>
				<view class="top-icon" @click="back">
					<image class="img" :src="$c.config.imageIP + 'yuemini/ic_back.png'" mode="aspectFill"></image>
				</view>
				<view class="top-title">{{title}}</view>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="body">
				<scroll-view scroll-y="true" class="scr"
					:style="{height:pageheigh-$store.state.StatusBar.statusBar-100+`px`}">
					<view class="list">
						<view class="flex_r fa_c item" :class="selectId == item.id ? 'on' : ''"
							@click="selectChange(item)" v-for="(item,index) in info.list">
							<image class="image" :src="$c.config.imageIP + 'yuemini/ic_diamond.png'"></image>
							<view style="position:absolute; top:20px; left:160rpx;">{{item.diamonds}}</view>
							<view style="position:absolute; top:50px; left:160rpx; color: #999; font-size:20rpx;">
								送{{item.give}}钻石</view>
							<view class="time">￥{{item.money}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="buy" @click="open">立即购买</view>
			<uni-popup ref="popup" type="center">
				<m-pay :money="item.money" :projectId="selectId" :type="1"></m-pay>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import Mpay from '@/components/m-pay/m-pay.vue';
	import {
		to
	} from '@/utils/index.js';
	export default {
		components: {
			Mpay
		},
		data() {
			return {
				$c: this.$c,
				pageheigh: 0,
				isWXflag: false,
				selectId: 0,
				item: {
					money: 0
				},
				title: '',
				info: {}
			}
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			this.isWXflag = true;
			// #endif
		},
		onShow(option) {
			this.pageheigh = uni.getSystemInfoSync().windowHeight;

			uni.onWindowResize((res) => {
				this.pageheigh = res.size.windowHeight;
			});

			this.getInfo();
			this.title = '钻石充值'
		},
		methods: {
			to,
			back() {
				to()
			},
			open() {
				if (this.selectId <= 0) {
					uni.showToast({
						title: "请选择充值金额",
						icon: "none"
					})
					return;
				}
				this.$refs.popup.open()
			},
			selectChange(item) {
				this.selectId = item.id;
				this.item = item;
			},
			async getInfo() {
				let res = await this.$c.post("/app/chongzhi/getRechargeAmountList")
				if (res.code != 0) {
					
					
				}
				this.info = res.data;
				console.log(res.data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
	}

	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx;
	}

	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}

	.top-title {
		line-height: 50rpx;
		display: block;
		height: 50rpx;
		z-index: 99;
		color: #fff;
	}

	.body {
		padding-top: 40rpx;
	}

	.list {
		padding: 20rpx;
		padding-left: 2%;
		padding-right: 2%;
	}

	.on {
		border: 1px solid #c60000;
	}

	.buy {
		padding: 20rpx;
		background-color: #c60000;
		color: #fff;
		border-radius: 30rpx;
		text-align: center;
		position: absolute;
		width: 80%;
		transform: translateX(-20rpx);
		left: 10%;
		bottom: 20rpx;
	}

	.item {
		width: 90vw;
		height: 120rpx;
		background-color: #e3ecfb;
		border-radius: 20rpx;
		position: relative;
		margin-top: 20rpx;
		padding: 20rpx;

		.image {
			width: 120rpx;
			height: 120rpx;
		}

		.time {
			position: absolute;
			right: 10%;
			font-size: 22rpx;
			color: #4c4c4c;
		}

		.title {
			margin-top: 20rpx;
			font-size: 28rpx;
		}

		.bottom {
			margin-top: 20rpx;
			font-size: 24rpx;
			padding-top: 20rpx;
			border-top: 1px solid #bdbdbd;
		}

		.item-infr {
			.item-infr-top {}

			.item-infr-top-img {
				width: 40rpx;
				height: 40rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}

		.item-button {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			background-color: #e8e1e8;
		}

		.item-button_ {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			background-image: linear-gradient(to right, rgba(230, 22, 106, 0.3), #e6166a);

			.item-button_icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}
		}

	}
</style>